<template>
	<view class="page-content">
		<view class="m-vipcard">
			<view class="u-card highlight">
				<view class="flex-start" style="position: relative;z-index: 2;flex-flow: nowrap;">
					<view class="user-avatar">
						<u-avatar :src="userInfo.avatar" size="50"></u-avatar>
					</view>
					<view style="margin-left: 10px;">
						<view class="e-username">
							<text v-if="userInfo">{{userInfo.username}}</text>
							<text v-if="!userInfo" @click="$util.go('auth/login')">{{$t('vip.no-login')}}</text>
						</view>
						<text class="e-tips" v-if="!userInfo" @click="$util.go('auth/login')">{{$t('vip.no-login-tips')}}</text>
						<text class="e-tips" v-if="userInfo && userInfo.level > 1">
						<!-- {{userInfo}} -->
							{{ $util.handleStr($t('vip.level-tips'),userInfo.level_name,userInfo.level_time) }}
						</text>
						<text class="e-tips" v-if="userInfo && userInfo.level == 1">{{$t('vip.no-openvip-tips')}}</text>
					</view>
				</view>
				<uni-icons type="vip" size="100" color="#d0a069"></uni-icons>
			</view>
		</view>

		
		<m-viptabs 
			:list="levelList" 
			:onSet="onSet"
			:onInfo="onLevelInfo"
			:agreeId="configInfo.vip_agree_id"
			:onLevel="userInfo.level"
			@changeLevel="changeLevel"
			@openVip="payMethodShow = true"
		>
		</m-viptabs>
		<!--身份信息-->
		<m-quanyilist 
			:defaultInfo="defaultInfo" 
			:onInfo="onLevelInfo">
		</m-quanyilist>
		
		<!-- 支付方式 -->
		<pay-method
			:show="payMethodShow"
			ref="payMethod"
			:moneyPay="configInfo.openvip_moeny_pay"
			@close="closePayMethod"
			@action="submit"
		> 
		</pay-method>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				onSet:0, //当前选中的卡片
				onLevelId:'', //当前选中的卡片ID参数
				onLevelInfo:[], //当前选中的卡片信息参数
				defaultInfo:[],
				noMoneyShow:false,
				payMethodShow:false, // 支付方法弹窗
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			levelList: state => uni.getStorageSync('levelList') || state.config.levelList,
		}),
		async onLoad() {
			this.initVip()
			this.getUserInfo()
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			console.log(this.userInfo)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),
			
			initVip(){
				if(this.levelList.length <= 0){
					this.$util.showToast('平台未配置会员数据')
					return;
				}
				if(this.userInfo.level > 1){
					// 当前用户是会员身份
					this.onSet = this.userInfo.level - 2;
				}
				this.onLevelId = this.levelList[this.onSet].id;
				this.onLevelInfo = this.levelList[this.onSet];
				this.defaultInfo = this.configInfo.default_level;
			},
			
			async submit(method){
				// console.log(e)
				// this.$util.showLoading(this.$t('vip.open-loading'))
				let data = {
					type : 2,
					level_id : this.onLevelId,
					method : method, // 选择的支付方式
				}
				let res = await this.$api.user.openVip(data)
				// console.log(res)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						if(method == 3){
							thos.payMethodShow = false
						}else{
							let orderNum = res.data.order_num
							thos.$refs.payMethod.action(res.data['order_num']);
						}
					})
					this.getUserInfo()
				}
				this.$refs.payMethod.loading = false
			},
			
			closePayMethod(){
				this.payMethodShow = false
			},
			changeLevel(e){
				this.onSet = e.index;
				this.onLevelId = e.id;
				this.onLevelInfo = this.levelList[this.onSet];
			},
			clickLeft(){
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.m-vipcard{
		padding-top:10px;
		background: #282828;
		.u-card{
			margin: 0 30rpx;
			padding: 10px;
			position: relative;
			overflow: hidden;
			border-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			background: linear-gradient(-45deg, #dbaa70 50%, #fdd5a6 60%, #dbaa70 70%);
			background-size: 600% 100%;
			/deep/ .uni-icons{
				position: absolute;
				right: -10px;
				bottom: -30px;
				z-index: 1;
			}
			.e-username{
				font-size: 32rpx;
				font-weight: bold;
				color: #5e3e29;
			}
			.e-tips{
				font-size: 27rpx;
				color: #5e3e29;
			}
		}
	}
	.user-avatar{
		border:3px solid rgba(255, 255, 255, .5);
		border-radius: 100%;
	}
	.m-viptabs{
		margin: 15px 30rpx;
	}

	.m-quanyilist{
		margin: 10px 30rpx;
	}
	.highlight{
	  -webkit-animation: shine 20s infinite;
	          animation: shine 20s infinite;
	  -webkit-animation-delay: 0s;
	          animation-delay: 0s;
	  -webkit-animation-timing-function: linear;
	          animation-timing-function: linear;
	}
	/*定义动画*/
	
	@-webkit-keyframes shine {
	  0% {
	    background-position-x: 400%;
	  }
	  50% {
	    background-position-x: 0%;
	  }
	  100% {
	    background-position-x: -400%;
	  }
	}
	
	@keyframes shine {
	  0% {
	    background-position-x: 400%;
	  }
	  50% {
	    background-position-x: 0%;
	  }
	  100% {
	    background-position-x: -400%;
	  }
	}
	
	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@-webkit-keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
</style>
